<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title><%= title %></title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- Load Leaflet from CDN -->
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
	    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	    crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
	    integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
	    crossorigin=""></script>
				<!-- https://v4.bootcss.com/docs/examples/pricing/ -->		
				
		<link rel="stylesheet" href="../stylesheets/mainpage.css"/>
		<script src="../javascripts/FirstMap.js"></script>
	</head>
	<body onload="init()">
	    
	    	<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
	    	  <h5 class="my-0 mr-md-auto font-weight-normal">轻量级WebGIS开发入门与实践</h5>
	    	  <nav class="my-2 my-md-0 mr-md-3">
				<a class="p-2 text-dark" href="#">Html</a>
	    	    <a class="p-2 text-dark" href="#">Geojson</a>
	    	    <a class="p-2 text-dark" href="#">Geoserver</a>
	    	    <a class="p-2 text-dark" href="#">Bootstrap</a>
				<a class="p-2 text-dark" href="#">Node.js</a>
				<a class="p-2 text-dark" href="#">Node Express</a>
				<a  data-toggle="modal" data-target="#Modal_Contact">联系我们</a>
	    	  </nav>
			 <a class="btn btn" href="/login">登录</a>
	    	  <a class="btn btn" href="/reg">注册</a>
	    	</div>
			<div >
				<section>
					<p id='map'></p>
				</section>
			</div>
			<div class="modal fade  bs-example-modal-lg" id="Modal_Contact" tabindex="-1" role="dialog" aria-labelledby="Modal_ContactLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="Modal_ContactLabel" align="center">联系我们</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div><!-- / .modal-header-->
					<div class="modal-body">
						<ul class="list-group">
							<li class="list-group-item">电话：027-88661699-8103</li>
							<li class="list-group-item">Email: lizy.hbu@qq.com</li>
							<li class="list-group-item">© 版权所有：湖北大学资源环境学院. All right reserved.</li>
						</ul>
					</div><!-- / .modal-body-->
							<div class="modal-footer" align="center">
							</div><!-- / .modal-footer-->
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog-->
	</body>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
	
	
</html>